<template>
  <div id="loginLayout" :class="['login-layout-wrapper', device]">
    <div class="container">
      <div class="logo">
      </div>
      <div class="contentLogo">
      </div>
      <div class="icp">
        <a href="https://beian.miit.gov.cn/" target="_blank" style="color: rgb(255, 255, 255);">
          益鑫蓬隆大数据采集整合管理系统
        </a>
      </div>
      <route-view style="box-shadow: 0 0 20px 10px #124a93;"></route-view>
    </div>
  </div>
</template>

<script>
import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
import { currentY } from '../../mixins/commontime'

export default {
  name: 'loginLayout',
  methods: { currentY },
  components: { RouteView },
  mixins: [mixinDevice],
  data() {
    return {}
  },
  mounted() {
    document.body.classList.add('loginLayout')
  },
  beforeDestroy() {
    document.body.classList.remove('loginLayout')
  }
}
</script>

<style lang="less" scoped>
#loginLayout.login-layout-wrapper {
  height: 100%;

  &.mobile {
    .container {
      .main {
        max-width: 368px;
        width: 100%;
      }
    }
  }

  .container {
    width: 100%;
    height: 100%;
    //background: url(~@/assets/bg1.png) no-repeat;
    background-image: url(~@/assets/bg2.jpg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    //padding: 60px;
    position: relative;
    align-items: center;

    a {
      text-decoration: none;
    }

    .icp {
      width: 100%;
      display: flex;
      justify-content: center;
      top: 95%;
      position: absolute;
      font-size: 16px;
      color: rgb(255, 255, 255);
    }

    .logo{
      position: absolute;
      top: 3%;
      left: 2%;
      background-image: url(~@/assets/bg-logo.png);
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      width: 20%;
      height: 10%;
    }

    .contentLogo {
      height: 55%;
      background-image: url(~@/assets/bg-content.png);
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      padding-top: 60px;
      padding-left: 50px;
      overflow: hidden;
      margin-left: -2%;
      width: 68%;


      img {
        display: block;
        height: 100px;
        float: left;
      }

      h2 {
        // padding-left: 140px;
        color: #fff;
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 8px;
        line-height: 100px;
      }

      .title {
        position: absolute;
        bottom: 160px;

        h1 {
          color: #fff;
          font-size: 65px;
          line-height: 20px;
        }

        .subtitle {
          font-size: 40px;
          color: #b5d7f5;
          // margin-top: -30px;
        }
      }
    }

    .main {
      padding-top: 10px;
      background-color: #fff;
      width: 450px;
      height: 480px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center
    }
  }
}
</style>